<template>
  <div
    id="myChart7"
    :style="{ height: 6.25 * $store.state.radomRate + 'rem' }"
  ></div>
</template>
<script>
export default {
  data() {
    return {
      time: new Date().getTime(),
    };
  },
  mounted() {
    this.typeRankConEmp();
  },
  methods: {
    typeRankConEmp() {
      let params = {
        time: this.time,
      };
      let result = this.$md5.transferValue(params);
      this.axios
        .post(this.stateUrl.dataModel.typeRankConEmp, {
          time: this.time,
          sign: this.$md5.val(result),
        })
        .then((res) => {
          this.drawLine(res.data.data);
        })
        .catch(() => {});
    },
    drawLine(list) {
      let myChart = this.$echarts.init(document.getElementById("myChart7"));
      let listData = list.map(item=>{
        return item.typeName
      })
      var option = {
        color:["#FAC858","#91CC75","#5470C6","#EE6666","#73C0DE","#00BFFF","#00FA9A","#B15896"],
        textStyle: {
          fontSize: 16,
        },
        series: [
          {
            name: "",
            type: "funnel",
            left: "10%",
            top: "30",
            bottom: 80,
            width: "80%",
            min: 0,
            max: 100,
            minSize: "0%",
            maxSize: "100%",
            sort: "ascending",
            gap: 5,
            label: {
              show: true,
              position: "right",
            },
            labelLine: {
              length: 10,
              lineStyle: {
                width: 1,
                type: "solid",
              },
            },
            itemStyle: {
              borderColor: "#fff",
              borderWidth: 2,
            },
            emphasis: {
              label: {
                fontSize: 20,
              },
            },
            data: [
              {
                value: 10,
                name: listData[0],
                labelLine: {
                  length: 200,
                  lineStyle: {
                    width: 1,
                    type: "dotted",
                  },
                },
              },
              {
                value: 20,
                name: listData[1],

                labelLine: {
                  length: 175,
                  lineStyle: {
                    width: 1,
                    type: "dotted",
                  },
                },
              },
              {
                value: 30,
                name: listData[2],
                labelLine: {
                  length: 150,
                  lineStyle: {
                    width: 1,
                    type: "dotted",
                  },
                },
              },
              {
                value: 40,
                name:listData[3],

                labelLine: {
                  length: 125,
                  lineStyle: {
                    width: 1,
                    type: "dotted",
                  },
                },
              },
              {
                value: 50,
                name: listData[4],
                labelLine: {
                  length: 100,
                  lineStyle: {
                    width: 1,
                    type: "dotted",
                  },
                },
              },
              {
                value: 60,
                name: listData[5],
                labelLine: {
                  length: 75,
                  lineStyle: {
                    width: 1,
                    type: "dotted",
                  },
                },
              },
              {
                value: 70,
                name: listData[6],
                labelLine: {
                  length: 50,
                  lineStyle: {
                    width: 1,
                    type: "dotted",
                  },
                },
              },
              {
                value: 80,
                name: listData[7],
                labelLine: {
                  length: 20,
                  lineStyle: {
                    width: 1,
                    type: "dotted",
                  },
                },
              },
            ],
          },
        ],
      };

      myChart.setOption(option);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
  },
};
</script>
<style lang="less" scoped>
</style>